<!-- 世界设置 -->
<template>
  <div class="set-world">
    <div class="set-content">
      <div class="set-item">
        <div class="item-title">
          经验倍率
        </div>
        <div class="item-contain">
          <i class="iconfont icon-jifen item-experience"></i>
          <span>×{{ exp_rate }}</span>
        </div>
        <div class="item-edit">
          <el-input
            v-model="inputExperience"
            placeholder="请输入内容"
          ></el-input>
          <div class="edit-btn">
            <el-row>
              <el-button type="primary" size="small" @click="handleEditExp"
                >确认修改</el-button
              >
              <el-button type="info" size="small" @click="handleClearExp"
                >清空内容</el-button
              >
            </el-row>
          </div>
        </div>
      </div>
      <div class="set-item">
        <div class="item-title">
          金币倍率
        </div>
        <div class="item-contain">
          <i class="iconfont icon-qian2 item-money"></i>
          <span>×{{ mon_rate }}</span>
        </div>
        <div class="item-edit">
          <el-input v-model="inputMoney" placeholder="请输入内容"></el-input>
          <div class="edit-btn">
            <el-row>
              <el-button type="primary" size="small" @click="handleEditMoney"
                >确认修改</el-button
              >
              <el-button type="info" size="small" @click="handleClearMoney">清空内容</el-button>
            </el-row>
          </div>
        </div>
      </div>
      <div class="set-item">
        <div class="item-title">
          物品倍率
        </div>
        <div class="item-contain">
          <i class="iconfont icon-beibao item-thing"></i>
          <span>×{{ burst_rate }}</span>
        </div>
        <div class="item-edit">
          <el-input v-model="inputThing" placeholder="请输入内容"></el-input>
          <div class="edit-btn">
            <el-row>
              <el-button type="primary" size="small" @click="handleClickThing"
                >确认修改</el-button
              >
              <el-button type="info" size="small" @click="handleClearThing">清空内容</el-button>
            </el-row>
          </div>
        </div>
      </div>
      <div class="set-item">
        <div class="item-title">
          宠物倍率
        </div>
        <div class="item-contain">
          <i class="iconfont icon-chongwu item-animal"></i>
          <span>×{{ pet_rate }}</span>
        </div>
        <div class="item-edit">
          <el-input v-model="inputAnimal" placeholder="请输入内容"></el-input>
          <div class="edit-btn">
            <el-row>
              <el-button type="primary" size="small" @click="handleEditAnimal"
                >确认修改</el-button
              >
              <el-button type="info" size="small" @click="handleClearPet"
                >清空内容</el-button
              >
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="set-notice">
      <div class="notice-title">
        <i class="iconfont icon-broadcast-full"></i>世界公告
      </div>
      <div class="notice-content">{{ notice }}</div>
      <div class="notice-edit">
        <el-input v-model="inputNotice" placeholder="请输入内容"></el-input>
        <div class="edit-btn">
          <el-row>
            <el-button type="primary" size="small" @click="handleSaveNotice"
              >确认修改</el-button
            >
            <el-button type="info" size="small" @click="handleClearNotice">清空内容</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      inputExperience: '',
      inputMoney: '',
      inputThing: '',
      inputAnimal: '',
      inputNotice: '',
      exp_rate: '',
      mon_rate: '',
      burst_rate: '',
      pet_rate: '',
      notice: ''
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // handleEditAnimal: function () {
    //   if (Number(this.inputAnimal)) {
    //     console.log(this.inputAnimal);
    //     this.pet_rate = this.inputAnimal;
    //     console.log(this.pet_rate);
    //     this.$message({
    //       message: '修改成功',
    //       type: 'success'
    //     });
    //     this.inputAnimal = '';
    //   } else {
    //     this.$message.error('没有可修改内容');
    //     this.inputAnimal = '';
    //   }
    // },
    // 清楚经验的输入框
    handleClearExp: function () {
      this.inputExperience = '';
    },
    // 清楚金币的输入框
    handleClearMoney: function () {
      this.inputMoney = '';
    },
    // 清空物品爆率的输入框
    handleClearThing: function () {
      this.inputThing = '';
    },
    // 清除宠物经验
    handleClearPet: function () {
      this.inputAnimal = '';
      console.log(this.inputAnimal);
    },
    // 清空公告的输入框
    handleClearNotice: function () {
      this.inputNotice = '';
    },
    // 经验倍率的修改
    async handleEditExp () {
      if (!this.inputExperience) return;
      // console.log(this.notice);
      await this.$axios
        .put('/world/expRate', {
          expRate: this.inputExperience
        })
        .then(res => {
          if (res.status === 0) {
            // this.exp_rate = this.inputExperience;
            this.getSettingList();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败！');
          }
        });
    },
    // 金币倍率的修改
    async handleEditMoney () {
      if (!this.inputMoney) return;
      // console.log(this.notice);
      await this.$axios
        .put('/world/goldRate', {
          goldRate: this.inputMoney
        })
        .then(res => {
          if (res.status === 0) {
            // this.mon_rate = this.inputMoney;
            this.getSettingList();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败！');
          }
        });
    },
    // 物品爆率倍率的修改
    async handleClickThing () {
      if (!this.inputThing) return;
      // console.log(this.notice);
      await this.$axios
        .put('/world/burstRate', {
          burstRate: this.inputThing
        })
        .then(res => {
          if (res.status === 0) {
            // this.burst_rate = this.inputThing;
            this.getSettingList();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败！');
          }
        });
    },
    // 宠物经验倍率的修改
    async handleEditAnimal () {
      if (!this.inputAnimal) return;
      // console.log(this.notice);
      await this.$axios
        .put('/world/petRate', {
          petRate: this.inputAnimal
        })
        .then(res => {
          if (res.status === 0) {
            // this.pet_rate = this.inputAnimal;
            this.getSettingList();
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败！');
          }
        });
    },

    // 保存公告的修改
    async handleSaveNotice () {
      if (!this.inputNotice) return;
      // console.log(this.notice);
      await this.$axios
        .put('/world/expRate', {
          notice: this.notice
        })
        .then(res => {
          if (res.status === 0) {
            this.notice = this.inputNotice;
            this.$message({
              message: '修改成功',
              type: 'success'
            });
          } else {
            this.$message.error('修改失败！');
          }
        });
      this.getSettingList();
      // .then(res => {
      //   // console.log(res.data.notice);
      //   // console.log('hhh');
      //   this.notice = res.data;
      // });
      // this.$axios.get('/world/setting').then(res => {
      //   // console.log(res.data.notice);
      //   // console.log('hhh');
      //   this.notice = res.data.notice;
      // });
      // if (res.status != 0) {
      //   return this.$message.error('修改失败！');
      // }
    },

    // 发起请求设置世界的数据
    getSettingList: function () {
      this.$axios.get('/world/setting').then(res => {
        console.log(res.data.notice);
        console.log('hhh');
        console.log(res.data);
        this.notice = res.data.notice;
        this.exp_rate = res.data.exp_rate.toFixed(2);
        this.mon_rate = res.data.gold_rate.toFixed(2);
        this.burst_rate = res.data.burst_rate.toFixed(2);
        this.pet_rate = res.data.pet_rate.toFixed(2);
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.getSettingList();
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.set-world {
  .set-content {
    display: flex;
    justify-content: space-between;
    .set-item {
      width: 220px;
      height: 270px;
      border: 1px solid #eee;
      background: #fff;
      .item-title {
        width: 220px;
        height: 40px;
        background: #409eff;
        color: #fff;
        text-align: center;
        line-height: 40px;
        box-sizing: border-box;
      }

      .item-contain {
        height: 100px;
        padding: 20px;
        box-sizing: border-box;
        .item-experience {
          color: #ff7070;
          font-size: 60px;
        }
        .item-money {
          color: #f9ac3e;
          font-size: 60px;
        }
        .item-thing {
          color: #533f0d;
          font-size: 60px;
        }
        .item-animal {
          color: #91cc75;
          font-size: 60px;
        }
        span {
          font-size: 30px;
          color: #000;
          font-style: oblique;
        }
      }

      .item-edit {
        padding: 20px;
        .edit-btn {
          margin-top: 14px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  .set-notice {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    margin-top: 20px;
    background: #fff;
    .notice-title {
      height: 20px;
      color: #777;
      border-bottom: 1px soloid #eee;
      padding: 10px;
      i.iconfont.icon-broadcast-full {
      }
    }

    .notice-content {
      border-bottom: 1px solid #eee;
      padding: 10px;
    }

    .notice-edit {
      padding: 10px;
      .edit-btn {
        margin: 10px;
      }
    }
  }
}
</style>
